<template>
  <el-container>
    <el-header style="line-height: 30px; height: 30px;">
      <el-form ref="queryData" :model="queryData" inline size="mini" style="height: 30px;">
        <el-form-item >
          <el-input v-model="queryData.name" placeholder="门店名称" style="width: 120px;" />
        </el-form-item>
        <el-form-item>
          <datePicker :time="queryData.time" @change="getTime" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain icon="el-icon-search" size="mini" @click="queryPageList">查询</el-button>
          <el-button type="info" icon="el-icon-refresh" size="mini" @click="reset('queryData')">重置</el-button>
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="addSysUser">新增门店</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <el-table v-loading="loading" :data="pageTableData" border size="small" max-height="700">
        <el-table-column label="门店名称" prop="name" header-align="center" align="center" min-width="140" />
        <el-table-column label="创建时间" prop="createTime" header-align="center" align="center" min-width="140" />

        <el-table-column label="门店地址" prop="address" header-align="center" align="center" min-width="260" />
        <el-table-column label="门店联系人" prop="contacts" header-align="center" align="center" min-width="100" />
        <el-table-column label="联系人电话" prop="mobile" header-align="center" align="center" min-width="100" />
        <el-table-column label="联系人邮箱" prop="email" header-align="center" align="center" min-width="100" />
        <el-table-column label="操作" fixed="right" header-align="center" align="center" min-width="180">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="updateShop(scope.row)"
            >编辑</el-button>
            <el-button
              type="text"
              size="mini"
              @click="deleteData(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer style="text-align: right">
      <el-pagination
        :current-page="queryData.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryData.totalCount"
        @size-change="pageSizeChange"
        @current-change="pageCurrentChange"
      />
    </el-footer>

    <!-- 新增系统用户 -->
    <el-dialog
      v-loading="sysUser.loading"
      :title="sysUser.title"
      :visible.sync="sysUser.show"
      top="15vh"
      width="500px"
      :before-close="handleClose"
    >
      <el-form
        ref="sysUserForm"
        :model="sysUser.form"
        :rules="rules"
        size="small"
        label-width="100px"
        style="width: 450px;"
      >
        <el-form-item label="门店名称" prop="name">
          <el-input v-model="sysUser.form.name" placeholder="请输入门店名称" />
        </el-form-item>

        <el-form-item label="门店地址" prop="address">
          <el-input v-model="sysUser.form.address" placeholder="请输入门店地址" />
        </el-form-item>
        <el-form-item label="联系人" prop="contacts">
          <el-input v-model="sysUser.form.contacts" placeholder="请输入联系人" />
        </el-form-item>
        <el-form-item label="联系人电话" prop="mobile">
          <el-input v-model="sysUser.form.mobile" placeholder="请输入联系人电话" />
        </el-form-item>
        <el-form-item label="联系人邮箱" prop="email">
          <el-input v-model="sysUser.form.email" placeholder="请输入联系人邮箱" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="sysUser.show = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submitSysUser">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>

</template>

<script>
import datePicker from '@/components/model/component/date-picker/startEndTime.vue'
import { sysAjax } from 'Ajax'
export default {
  name: 'MERCHANTSHOP',
  components: {
    datePicker
  },
  data() {
    return {
      loading: false,
      queryData: {
        pageNum: 1,
        pageSize: 10,
        totalCount: 0
      },
      pageTableData: [],
      statusMap: { false: '禁用', true: '启用' },
      rules: {
        name: [{ required: true, message: '门店名称不能为空' }],
        contacts: [{ required: true, message: '联系人不能为空' }],
        mobile: [{ required: true, message: '联系人电话不能为空' }],
        email: [{ required: true, message: '邮箱不能为空' }],
        address: [{ required: true, message: '地址不能为空' }],
      },
      sysUser: {
        title: '新增门店',
        show: false,
        loading: false,
        form: {}
      },
    }
  },
  created() {
    this.queryPageList()
  },
  methods: {
    getTime(val) {
      this.queryData.startTime = val.startTime + ' 00:00:00';
      this.queryData.endTime = val.endTime + ' 23:59:59';
      // this.queryData.submitStartTime = val.startTime + ' 00:00:00';
      // this.queryData.submitEndTime = val.endTime + ' 23:59:59';
    },
    reset(formName) {
      this.queryData = {
        pageNum: 1,
        pageSize: 10,
        totalCount: 0
      }
      this.queryPageList()
    },
    queryPageList() {
      this.loading = true
      sysAjax.selectMerchantShop(this.queryData).then(response => {
        this.pageTableData = response.list
        this.queryData.pageNum = response.currPage
        this.queryData.pageSize = response.pageSize
        this.queryData.totalCount = response.totalCount
        this.loading = false
      })
    },
    pageChange(pageNo, pageSize) {
      this.queryData.pageNum = pageNo
      this.queryData.pageSize = pageSize
      this.queryPageList()
    },
    pageSizeChange(val) {
      this.queryData.pageSize = val
      this.queryPageList()
    },
    pageCurrentChange(val) {
      this.queryData.pageNum = val
      this.queryPageList()
    },
    addSysUser() {
      this.sysUser.show = true
      this.sysUser = {
        title: '新增门店',
        show: true,
        loading: false,
        form: {
          status: true
        }
      }
    },
    updateShop(row) {
      this.sysUser = {
        title: '修改门店信息',
        show: true,
        loading: false,
        form: row
      }
      // const roleIdArray = []
      // row.roleIds.split(',').forEach(e => {
      //   roleIdArray.push(Number(e))
      // })
      // this.$set(this.sysUser.form, 'roleIds', roleIdArray)
      this.sysUser.show = true
    },
    submitSysUser() {
      this.$refs.sysUserForm.validate((valid) => {
        if (valid) {
          // return
          this.sysUser.loading = true
          if (this.sysUser.form.id === undefined) {
            delete this.sysUser.form.status
            let obj = {
              ...this.sysUser.form,
              // merchantCode: this.authInfo.userId
              merchantCode: '852104816000329'
            }
            sysAjax.saveMerchantShop(obj).then(() => {
              this.msgSuccess('添加门店成功')
              // 设置延迟执行
              this.timer = setTimeout(() => {
                this.sysUser = {
                  title: '新增门店',
                  show: false,
                  loading: false,
                  form: {}
                }
                this.queryPageList()
              }, 500)
            }).catch(() => {
              this.sysUser.loading = false
            })
          } else {
            this.sysUser.form.merchantCode = '852104816000329'
            // this.sysUser.form.merchantCode = this.authInfo.userId
            sysAjax.saveMerchantShop(this.sysUser.form).then(() => {
              this.msgSuccess('修改成功')
              this.timer = setTimeout(() => {
                this.sysUser = {
                  title: '新增门店',
                  show: false,
                  loading: false,
                  form: {}
                }
                this.queryPageList()
              }, 500)
            }).catch(() => {
              this.sysUser.loading = false
            })
          }
        }
      })
    },
    deleteData(val) {
      alert('删除')
    }
  }
}
</script>

<style scoped lang='scss'>
/deep/ .el-form-item__label {
  font-size: 13px;
  font-weight: 500;
}
</style>
